<template>
  <div class="goods_nav">
    <div class="nav_content">
      <div
        v-for="(item, index) in list"
        :key="index"
        @click="goListPage(item.id)"
      >
        <img :src="'../../../../../binbing/homePagePublic/' + item.img" />
        <p>{{ item.title }}</p>
      </div>
    </div>
  </div>
</template>

<script>
// import axios from "axios";
export default {
  name: "NavIcon",
  data() {
    return {
      list: [
        {
            "id": "01101",
            "img": "nav01.webp",
            "title": "智慧办公"
        },
        {
            "id": "01102",
            "img": "nav02.webp",
            "title": "智能家居"
        },
        {
            "id": "01103",
            "img": "nav03.gif",
            "title": "华为手机"
        },
        {
            "id": "01104",
            "img": "nav04.webp",
            "title": "影音娱乐"
        },
        {
            "id": "01105",
            "img": "nav05.webp",
            "title": "运动健康"
        },
        {
            "id": "01106",
            "img": "nav06.webp",
            "title": "智慧出行"
        },
        {
            "id": "01107",
            "img": "nav07.webp",
            "title": "莫塞尔"
        },
        {
            "id": "01108",
            "img": "nav08.webp",
            "title": "个护健康"
        },
        {
            "id": "01109",
            "img": "nav09.webp",
            "title": "教育商店"
        },
        {
            "id": "01110",
            "img": "nav10.webp",
            "title": "AITO汽车"
        },
        {
            "id": "01111",
            "img": "nav11.webp",
            "title": "众测"
        },
        {
            "id": "01112",
            "img": "nav12.webp",
            "title": "鸿蒙智联"
        },
        {
            "id": "01113",
            "img": "nav13.webp",
            "title": "华为智选"
        },
        {
            "id": "01114",
            "img": "nav14.webp",
            "title": "直播"
        },
        {
            "id": "01115",
            "img": "nav15.webp",
            "title": "企业团购"
        },
        {
            "id": "01116",
            "img": "nav16.webp",
            "title": "拼团"
        },
        {
            "id": "01117",
            "img": "nav17.webp",
            "title": "领券中心"
        },
        {
            "id": "01118",
            "img": "nav18.webp",
            "title": "二手机"
        }
      ]
    };
  },
  methods: {
    goListPage(id) {
      this.$router.push("/AITOPage/"+id);
    },
  },
  // created() {
  //   axios(
  //     {
  //       url: "http://localhost:3000/list"
  //     }
  //   ).then(
  //     res => {
  //       console.log(res);
  //       this.list = res.data;
  //     }
  //   );
  // }
};
</script>

<style scoped>
.goods_nav {
  height: 1.8rem;
  margin: 0.08rem 0.16rem;
  overflow: auto;
}

.nav_content {
  width: 6.84rem;
  height: 1.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.nav_content div {
  width: 0.76rem;
  height: 0.72rem;
  text-align: center;
}

.nav_content div img {
  width: 0.48rem;
  height: 0.48rem;
  display: inline-block;
}

.nav_content div p {
  font-size: 0.12rem;
  text-align: center;
}
</style>